<template>
  <div class="p-2">
    <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
      :leave-active-class="proxy?.animate.searchAnimate.leave">
      <div v-show="showSearch" class="mb-[10px]">
        <el-card shadow="hover">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item prop="templateName">
              <el-input v-model="queryParams.templateName" placeholder="请输入物模型名称" clearable
                @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item prop="identifier">
              <el-select v-model="queryParams.type" placeholder="请选择模型类别" clearable @keyup.enter="handleQuery">
                <el-option v-for="dict in iot_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </transition>

    <el-card shadow="never">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="Plus" @click="handleAdd"
              v-hasPermi="['iot:thingsModelTemplate:add']">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
              v-hasPermi="['iot:thingsModelTemplate:edit']">修改</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
              v-hasPermi="['iot:thingsModelTemplate:remove']">删除</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport"
              v-hasPermi="['iot:thingsModelTemplate:export']">导出</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="thingsModelTemplateList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="物模型ID" align="center" prop="templateId" v-if="false" />
        <el-table-column label="名称" align="center" prop="templateName" />
        <el-table-column label="标识符" align="center" prop="identifier" />
        <el-table-column label="模型类别" align="center" prop="type">
          <template #default="scope">
            <dict-tag :options="iot_type" :value="scope.row.type" />
          </template>
        </el-table-column>
        <el-table-column label="数据类型" align="center" prop="datatype">
          <template #default="scope">
            <dict-tag :options="iot_data_type" :value="scope.row.datatype" />
          </template>
        </el-table-column>
        <el-table-column label="数据定义" align="left" header-align="center" prop="specs" min-width="180"
          class-name="specsColor">
          <template #default="scope">
            <div v-html="formatSpecsDisplay(scope.row.specs, scope.row.datatype)"></div>
          </template>
        </el-table-column>
        <el-table-column label="图表展示" align="center" prop="isChart">
          <template #default="scope">
            <dict-tag :options="iot_yes_no" :value="scope.row.isChart" />
          </template>
        </el-table-column>
        <el-table-column label="历史存储" align="center" prop="isHistory">
          <template #default="scope">
            <dict-tag :options="iot_yes_no" :value="scope.row.isHistory" />
          </template>
        </el-table-column>
        <el-table-column label="所属机构" align="center" prop="deptName" />
        <el-table-column label="创建者" align="center" prop="createName" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['iot:thingsModelTemplate:edit']"></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
                v-hasPermi="['iot:thingsModelTemplate:remove']"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />
    </el-card>
    <!-- 添加或修改物模型模板对话框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="600px" append-to-body draggable>
      <el-form ref="thingsModelTemplateFormRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="模型名称" prop="templateName">
          <el-input v-model="form.templateName" placeholder="请输入物模型名称,例如：温度" />
        </el-form-item>
        <el-form-item label="模型标识" prop="identifier">
          <el-input v-model="form.identifier" placeholder="请输入模型标识符,例如：temperature" />
        </el-form-item>
        <el-form-item label=" 模型排序" prop="modelOrder">
          <el-input-number v-model="form.modelOrder" :min="1" :max="99999" placeholder="请输入排序，值越大，排序越靠前"
            :style="{ width: '300px' }" />
        </el-form-item>
        <el-form-item label="模型类别" prop="type">
          <el-radio-group v-model="form.type" size="large" fill="#6cf">
            <el-radio-button label="属性" :value=1 />
            <el-radio-button label="功能" :value=2 />
            <el-radio-button label="事件" :value=3 />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="模型特征" prop="templateType">
          <el-checkbox v-model="form.isChart" label="图标展示" :true-value="1" :false-value="0" :disabled="form.type !== 1"
            v-show="form.type === 1" />
          <el-checkbox v-model="form.isMonitor" label="实时监测" :true-value="1" :false-value="0"
            :disabled="form.type !== 1" v-show="form.type === 1" />
          <el-checkbox v-model="form.isReadonly" label="只读数据" :true-value="1" :false-value="0" />
          <el-checkbox v-model="form.isHistory" label="历史存储" :true-value="1" :false-value="0" />
          <el-checkbox v-model="form.isSharePerm" label="分享权限" :true-value="1" :false-value="0" />
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="数据类型" prop="dataType">
          <el-select v-model="form.datatype" placeholder="请选择数据类型">
            <el-option v-for="dict in iot_data_type" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="取值范围" v-if="form.datatype == '1'">
          <el-row>
            <el-col :span="11">
              <el-input v-model="specs.min" placeholder="最小值" controls-position="right" type="number"
                style="width: 160px;" @input="handleEdit" />
            </el-col>
            <el-col :span="2" align="center">到</el-col>
            <el-col :span="11">
              <el-input v-model="specs.max" placeholder="最大值" type="number" controls-position="right"
                style="width: 160px;" @input="handleEditmax" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="取值范围" v-if="form.datatype == '2'">
          <el-row>
            <el-col :span="11">
              <el-input v-model="specs.min" placeholder="最小值" controls-position="right" type="number"
                style="width: 160px;" />
            </el-col>
            <el-col :span="2" align="center">到</el-col>
            <el-col :span="11">
              <el-input v-model="specs.max" placeholder="最大值" type="number" controls-position="right"
                style="width: 160px;" />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="单位" prop="unit" v-if="form.datatype == '1' || form.datatype == '2'">
          <el-input v-model="specs.unit" placeholder="请输入单位,例如：℃" />
        </el-form-item>
        <el-form-item label="步长" prop="step" v-if="form.datatype == '1' || form.datatype == '2'">
          <el-input-number v-model="specs.step" placeholder="请输入步长" />
        </el-form-item>
        <div v-if="form.datatype == '4'">
          <el-form-item label="布尔值" prop="">
            <el-row style="margin-bottom: 10px">
              <el-col :span="9">
                <el-input v-model="specs.falseText" placeholder="例如：关闭" />
              </el-col>
              <el-col :span="10" :offset="1">（0 值对应文本）</el-col>
            </el-row>
            <el-row>
              <el-col :span="9">
                <el-input v-model="specs.trueText" placeholder="例如：打开" />
              </el-col>
              <el-col :span="10" :offset="1">（1 值对应文本）</el-col>
            </el-row>
          </el-form-item>
        </div>
        <div v-if="form.datatype == '6'">
          <el-form-item label="展示方式">
            <el-select v-model="specs.showWay" placeholder="请选择展示方式" style="width: 175px">
              <el-option key="select" label="下拉框" value="select"></el-option>
              <el-option key="button" label="按钮" value="button"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="枚举项" prop="">
            <el-row v-for="(item, index) in specs.enumList" :key="'enum' + index" style="margin-bottom: 10px">
              <el-col :span="9">
                <el-input v-model="item.value" placeholder="参数值，例如：0" />
              </el-col>
              <el-col :span="11" :offset="1">
                <el-input v-model="item.text" placeholder="参数描述，例如：中速档位" />
              </el-col>
              <el-col :span="2" :offset="1" v-if="index != 0"><a style="color: #f56c6c"
                  @click="removeEnumItem(index)">删除</a></el-col>
            </el-row>
            <div>
              +
              <a style="color: #409eff" @click="addEnumItem()">添加枚举项</a>
            </div>
          </el-form-item>
        </div>
        <div v-if="form.datatype == '3'">
          <el-form-item label="最大长度" prop="">
            <el-row>
              <el-col :span="9">
                <el-input v-model="specs.maxLength" placeholder="例如：1024" type="number" />
              </el-col>
              <el-col :span="14" :offset="1">（字符串的最大长度）</el-col>
            </el-row>
          </el-form-item>
        </div>
        <div v-if="form.datatype == '5'">
          <el-form-item label="元素个数" prop="">
            <el-row>
              <el-col :span="9">
                <el-input v-model="specs.arrayCount" placeholder="例如：5" type="number" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="数组类型" prop="">
            <el-radio-group v-model="specs.arrayType">
              <el-radio label="1">整数</el-radio>
              <el-radio label="2">小数</el-radio>
              <el-radio label="3">字符串</el-radio>
              <el-radio label="7">对象</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="对象参数" v-if="specs.arrayType == 7">
            <div style="background-color: #f8f8f8; border-radius: 5px">
              <el-row style="padding: 0 10px 5px" v-for="(item, index) in specs.params" :key="index">
                <div style="margin-top: 5px" v-if="index == 0"></div>
                <el-col :span="18">
                  <el-input readonly v-model="item.name" size="small" placeholder="请选择设备" style="margin-top: 3px">
                    <template slot="prepend">
                      <el-tag size="small" effect="dark" style="margin-left: -21px; height: 26px; line-height: 26px">{{
                        item.order }}</el-tag>
                      {{ form.identifier + '_' + item.id }}
                    </template>
                    <el-button slot="append" @click="editParameter(item, index)" size="small">编辑</el-button>
                  </el-input>
                </el-col>
                <el-col :span="2" :offset="2">
                  <el-button size="small" plain type="danger" style="padding: 5px" icon="el-icon-delete"
                    @click="removeParameter(index)">删除</el-button>
                </el-col>
              </el-row>
            </div>
            <div>
              +
              <a style="color: #409eff" @click="addParameter()">添加参数</a>
            </div>
          </el-form-item>
        </div>
        <div v-if="form.datatype == '7'">
          <el-form-item label="对象参数" prop="">
            <div style="background-color: #f8f8f8; border-radius: 5px">
              <el-row style="padding: 0 10px 5px" v-for="(item, index) in specs.params" :key="index">
                <div style="margin-top: 5px" v-if="index == 0"></div>
                <el-col :span="18">
                  <el-input readonly v-model="item.templateName" size="small" placeholder="请选择设备"
                    style="margin-top: 3px">
                    <template #prepend>
                      <el-tag size="small" effect="dark" style="margin-left: -21px; height: 26px; line-height: 26px">{{
                        item.modelOrder }}</el-tag>
                      {{ form.identifier + '_' + item.identifier }}
                    </template>
                    <template #append>
                      <el-button    @click="editParameter(item, index)">编辑</el-button>
                    </template>
                  </el-input>
                </el-col>
                <el-col :span="2" :offset="2">
                  <el-button size="default" plain type="danger" style="margin-top: 5px;"  icon="delete"
                    @click="removeParameter(index)">删除</el-button>
                </el-col>
              </el-row>
            </div>
            <div>
              +
              <a style="color: #409eff" @click="addParameter()">添加参数</a>
            </div>
          </el-form-item>
        </div>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- <para-meter  title="sdfsdf",:visible="visible"></para-meter> -->
    <para-meter ref="paraMeter"></para-meter>
  </div>
</template>

<script setup name="ThingsModelTemplate" lang="ts">
import { listThingsModelTemplate, getThingsModelTemplate, delThingsModelTemplate, addThingsModelTemplate, updateThingsModelTemplate } from '@/api/iot/thingsModelTemplate';
import { ThingsModelTemplateVO, ThingsModelTemplateQuery, ThingsModelTemplateForm, specs } from '@/api/iot/thingsModelTemplate/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { iot_type, iot_data_type, iot_yes_no } = toRefs<any>(proxy?.useDict('iot_data_type', 'iot_type', 'iot_yes_no'));
import ParaMeter from './parameter.vue';
const paraMeter = ref<InstanceType<typeof ParaMeter> | null>(null)
const thingsModelTemplateList = ref<ThingsModelTemplateVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref<Array<string | number>>([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const queryFormRef = ref<ElFormInstance>();
const thingsModelTemplateFormRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
  visible: false,
  title: ''
});

const specs: specs = reactive({
  min: 0,
  max: 0,
  unit: '',
  step: undefined,
  type: undefined,
  falseText: '',
  trueText: '',
  showWay: 'select',
  maxLength: '1024',
  arrayCount: 5,
  arrayType: 1,
  params: [],
  enumList: [{ value: undefined, text: undefined }]
});




const initFormData: ThingsModelTemplateForm = {
  templateId: undefined,
  templateName: undefined,
  identifier: undefined,
  type: 1,
  datatype: '1',
  specs: undefined,
  isChart: 1,
  isMonitor: 1,
  isHistory: 1,
  isReadonly: 1,
  isSharePerm: 1,
  modelOrder: 0,
}
const data = reactive<PageData<ThingsModelTemplateForm, ThingsModelTemplateQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    templateName: undefined,
    identifier: undefined,
    type: undefined,
    params: {
    }
  },
  rules: {
    templateId: [
      { required: true, message: "物模型ID不能为空", trigger: "blur" }
    ],
    templateName: [
      { required: true, message: "物模型名称不能为空", trigger: "blur" }
    ],
    identifier: [
      { required: true, message: "标识符，产品下唯一不能为空", trigger: "blur" }
    ],
    type: [
      { required: true, message: "模型类别不能为空", trigger: "change" }
    ],
    datatype: [
      { required: true, message: "数据类型不能为空", trigger: "change" }
    ],
    isChart: [
      { required: true, message: "是否图表展示不能为空", trigger: "blur" }
    ],
    isMonitor: [
      { required: true, message: "是否实时监测不能为空", trigger: "blur" }
    ],
    isHistory: [
      { required: true, message: "是否历史存储 (0-否，1-是）不能为空", trigger: "blur" }
    ],
  }
});

const { queryParams, form, rules } = toRefs(data);

/** 查询物模型模板列表 */
const getList = async () => {
  loading.value = true;
  const res = await listThingsModelTemplate(queryParams.value);
  thingsModelTemplateList.value = res.rows;
  total.value = res.total;
  loading.value = false;
}
/** 新增按钮操作 */
const handleAdd = () => {
  reset();
  dialog.visible = true;
  dialog.title = "添加物模型模板";
}

/** 修改按钮操作 */
const handleUpdate = async (row?: ThingsModelTemplateVO) => {
  reset();
  const _templateId = row?.templateId || ids.value[0]
  const res = await getThingsModelTemplate(_templateId);

  // 把res.data.specs字符串转为对象
  if (typeof res.data.specs === 'string') {
    res.data.specs = JSON.parse(res.data.specs);
  }
  console.log(form.value);
  Object.assign(form.value, res.data);
  dialog.visible = true;
  dialog.title = "修改物模型模板";
}

/** 删除按钮操作 */
const handleDelete = async (row?: ThingsModelTemplateVO) => {
  const _templateIds = row?.templateId || ids.value;
  await proxy?.$modal.confirm('是否确认删除物模型模板编号为"' + _templateIds + '"的数据项？').finally(() => loading.value = false);
  await delThingsModelTemplate(_templateIds);
  proxy?.$modal.msgSuccess("删除成功");
  await getList();
}

/** 导出按钮操作 */
const handleExport = () => {
  proxy?.download('iot/thingsModelTemplate/export', {
    ...queryParams.value
  }, `thingsModelTemplate_${new Date().getTime()}.xlsx`)
}
/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.visible = false;
}
/** 添加参数 */
const addParameter = () => {
  if (paraMeter.value) {
    paraMeter.value.dialog1.visible = true;
  } else {
    console.error('paraMeter is not ready');
  }

}
/** 表单重置 */
const reset = () => {
  form.value = { ...initFormData };
  specs.min=0;
  specs.max=0;
  specs.unit='';
  specs.step=undefined;
  specs.type=undefined;
  specs.falseText='';
  specs.trueText='';
  specs.showWay='select';
  specs.maxLength='1024';
  specs.arrayCount=5;
  specs.arrayType=1;
  specs.params=[];
  specs.enumList=[{ value: undefined, text: undefined }]
  thingsModelTemplateFormRef.value?.resetFields();
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value?.resetFields();
  handleQuery();
}

/** 多选框选中数据 */
const handleSelectionChange = (selection: ThingsModelTemplateVO[]) => {
  ids.value = selection.map(item => item.templateId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}


// 在输入最小值改变时触发
const handleEdit = (e) => {
  let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字
  value = value.replace(/\-{2,}/g, "-"); // -只能保留一个
  value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-，不能出现类似-11-2,12-，11-23
  value = value.replace(/(-)0+/g, "$1"); // 不能出现-0,-001,-0001类似
  value = value.replace(/(-\d{10})\d*/, '$1') // 最多保留10位整数
  specs.min = value;
}

// 在输入最大值改变时触发
const handleEditmax = (e) => {
  let value = e.replace(/[^\-\d]/g, ""); // 只能输入-和数字
  value = value.replace(/\-{2,}/g, "-"); // -只能保留一个
  value = value.replace(/(\d)\-/g, "$1"); // 数字后面不能接-，不能出现类似-11-2,12-，11-23
  value = value.replace(/(-)0+/g, "$1"); // 不能出现-0,-001,-0001类似
  value = value.replace(/(-\d{10})\d*/, '$1') // 最多保留10位整数
  specs.max = value;
}
/** 提交按钮 */
const submitForm = () => {
  thingsModelTemplateFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      buttonLoading.value = true;
      // 创建一个副本以避免修改原始响应式对象
      const formData = { ...form.value };
      // 将 specs 转换为 JSON 字符串
      formData.specs = JSON.stringify(specs);
      if (form.value.templateId) {
        await updateThingsModelTemplate(formData).finally(() => buttonLoading.value = false);
      } else {
        await addThingsModelTemplate(formData).finally(() => buttonLoading.value = false);
      }
      proxy?.$modal.msgSuccess("操作成功");
      dialog.visible = false;
      await getList();
    }
  });
}



onMounted(() => {
  getList();
});
watch(() => form.value.type, (newType) => {
  console.log("==========================================----------");
  console.log(newType);
  switch (newType) {
    case 1: // 属性
      form.value.isChart = 1;
      form.value.isMonitor = 1;
      form.value.isReadonly = 1;
      form.value.isHistory = 1;
      form.value.isSharePerm = 1;
      break;
    case 2: // 功能
      form.value.isChart = 0;
      form.value.isMonitor = 0;
      form.value.isReadonly = 0;
      form.value.isHistory = 1;
      form.value.isSharePerm = 1;
      break;
    case 3: // 事件
      form.value.isChart = 0;
      form.value.isMonitor = 0;
      form.value.isReadonly = 1;
      form.value.isHistory = 1;
      form.value.isSharePerm = 0;
      break;
  }
});
/** 添加枚举项 */
const addEnumItem = () => {
  specs.enumList.push({
    value: '',
    text: '',
  });
}
// 对象类型参数
const paramData = ref({
  index: -1,
  parameter: {},
})
/** 编辑参数*/
const editParameter = (data, index) => {

  paramData.value = {
    index: index,
    parameter: data,
  };
}
/** 删除动作 */
const removeParameter = (index) => {
  specs.params.splice(index, 1);
}
/** 删除枚举项 */
const removeEnumItem = (index) => {
  specs.enumList.splice(index, 1);
}
/** 格式化显示数据定义 */
const formatSpecsDisplay = (json, number) => {
  console.log(number);
  if (json == null || json == undefined) {
    return;
  }
  let specs = JSON.parse(json);
  if (number === '1' || number === '2') {
    return (
      '<span style=\'width:50%;display:inline-block;\'>最大值：<span style="color:#F56C6C">' +
      specs.max +
      '</span></span>最小值：<span style="color:#F56C6C">' +
      specs.min +
      '</span><br /><span style=\'width:50%;display:inline-block;\'>步长：<span style="color:#F56C6C">' +
      specs.step +
      '</span></span>单位：<span style="color:#F56C6C">' +
      specs.unit
    );
  } else if (number === '3') {
    return '最大长度：<span style="color:#F56C6C">' + specs.maxLength + '</span>';
  } else if (number === '5') {
    return '<span style=\'width:50%;display:inline-block;\'>数组类型：<span style="color:#F56C6C">' + specs.arrayType + '</span></span>元素个数：<span style="color:#F56C6C">' + specs.arrayCount;
  } else if (number === '6') {
    let items = '';
    for (let i = 0; i < specs.enumList.length; i++) {
      items = items + "<span style='width:50%;display:inline-block;'>" + specs.enumList[i].value + "：<span style='color:#F56C6C'>" + specs.enumList[i].text + '</span></span>';
      if (i > 0 && i % 2 != 0) {
        items = items + '<br />';
      }
    }
    return items;
  } else if (number === '4') {
    return '<span style=\'width:50%;display:inline-block;\'>0：<span style="color:#F56C6C">' + specs.falseText + '</span></span>1：<span style="color:#F56C6C">' + specs.trueText;
  } else if (number === '7') {
    let items = '';
    for (let i = 0; i < specs.params.length; i++) {
      items = items + "<span style='width:50%;display:inline-block;'>" + specs.params[i].name + "：<span style='color:#F56C6C'>" + specs.params[i].datatype.type + '</span></span>';
      if (i > 0 && i % 2 != 0) {
        items = items + '<br />';
      }
    }
    return items;
  }
};

watch(
  () => paraMeter.value?.reformData?.parameter,
  (newVal) => {
    console.log("formData========")
    console.log(newVal);
    console.log(paraMeter.value.reformData.parameter.templateId)
    specs.params.push(paraMeter.value.reformData.parameter)

    // form.value.specs.params.push(paraMeter.value.formData)
  }
);
</script>
